{% load humanize %}
{% load taggit_templatetags2_tags %}

{% if tracks %}
<table class="table table-dark table-striped table-hover table-sm">
    <caption class="sr-only">Tracks table</caption>
    <thead>
    <tr>
        <th>Name</th>
        <th>Started</th>
        <th>Length</th>
        <th class="text-center">Tags</th>
        <th class="text-center">Status</th>
        <th class="text-center">Edit</th>
    </tr>
    </thead>
    <tbody>
    {% for track in tracks %}
    <tr id="track{{ track.id }}">
        <td>
            <a href="{% url 'track:view' track.id %}">{{ track.name }}</a>
        </td>
        <td>{{ track.start_date|naturaltime }}</td>
        <td>{{ track.length|floatformat }} km</td>
        <td class="text-center">
            {% get_tags_for_object track as 'tags' %}
            {% for tag in tags|slice:':3' %}
            <a href="{% url 'tag:tag' tag.slug %}" class="badge badge-pill badge-secondary">{{ tag }}</a>
            {% endfor %}
            {% if tags|length > 3 %}
            <i class="badge badge-pill badge-secondary">...</i>
            {% endif %}
        </td>
        <td class="text-center status">
            {% if track.public %}
            <a href="#" title="public"><i class="fa fa-globe"></i></a>
            {% else %}
            <a href="#" title="private"><i class="fas fa-user-lock"></i></a>
            {% endif %}
        </td>
        <td class="text-center edit">
            <a href="{% url 'track:edit' track.id %}" title="edit"><i class="fas fa-edit"></i></a>
            {% if not track.public %}
            <a href="#" title="delete"><i class="fa fa-trash"></i></a>
            {% endif %}
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>
{% else %}
<div class="alert alert-info" role="alert">
    {% if active %}
    <form class="form" method="post" enctype="multipart/form-data" action="{% url 'table:view' %}">
        {% csrf_token %}
        You don't have Tracks yet. Try to
        <label>
            <input type="file" accept=".gpx" onchange="$('div.progress').show(); this.form.submit()" hidden name="gpx_file">
            <a  class="alert-link">import your first Track</a>
        </label>
    </form>
    {% else %}
    <a href="{% url 'user:profile' profile %}"><b>{{ profile }}</b></a> has no public tracks yet
    {% endif %}
</div>
{% endif %}